<template>
	<view class="whole">
	    <view class="myHearder">
			<view class="custom-navbar">
				<view class="left">
					<!-- 返回按钮 -->
					<image class="iconfont icon-xiangzuojiantou" @click="goBack"></image>
				</view>
				<view class="center">{{ title }}</view>
			</view>
			<view class="favorite-display">
				<view class="folder-header">
				    <view class="folder-info">
				      <view class="folder-name">{{ folder.name }}</view>
				      <view class="default-tag" v-if="folder.isDefault">默认</view>
				    </view>
					<!--新建按钮-->
					<view class="edit-button" @click="editFavorites">编辑</view>
				</view>
				<!-- 第二行：文件夹内容和可见性状态（公开/私密） -->
				<view class="folder-details">
				  <view class="folder-content">内容: {{ folder.contentCount }} 项</view>
				  <view class="visibility-status">{{folder.visibility === 1 ? '公开' : '私密' }}</view>
				</view>
			</view>
		</view>
		<view class="content">
			<dynamic-list-xhd
			class="list"
			:itemList="blogList"
			:viewHeight="viewHeight"
			:itemHeight="130"
			:loadCount="loadCount" 
			:fetchData="fetchCollectionData"
			:needRefresh="true"
			:startRefreshOnce="fetchDataOnce"
			>
			
			
			<template v-slot:item="{ item }" >
				<view class="card" @click="goDisplyBlog(item)">
				    <view class="title" :style="{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">
				      {{item.title}}
				    </view>
				    <view class="info">
				      <text class="author">{{item.username}}</text>
				      <image class="iconfont icon-weibiaoti5 icon" @click.stop="selectBlog(item)"></image>
				    </view>
				  </view>
			</template>
			
			</dynamic-list-xhd>
		</view>
		
		<view  :class="['delete-blog-modal', { 'slide-in': isShowDeleteBlogModal, 'slide-out': ! isShowDeleteBlogModal }]" @click="isShowDeleteBlogModal=false">
			<view class="delete-blog-modal-content" @click.stop >
				 <!-- 第一行：移动收藏夹 -->
				    <view class="modal-item" @click="moveFavorites">
				     <image class="iconfont icon-shoucangjia icon" ></image>
				      <text class="text">移动其他收藏夹</text>
				    </view>
				    
				    <!-- 第二行：删除收藏 -->
				    <view class="modal-item" @click="cancelCollection">
				      <image class="iconfont icon-cuowu icon" ></image>
				      <text class="text">删除收藏</text>
				    </view>
			</view>
		</view>
		
		
		<view  :class="['update-folder-modal-background', { 'fade-out':  !isShowUpdateFolderModal, 'fade-in': isShowUpdateFolderModal}]"  ></view>
		<view  :class="['update-folder-modal', { 'slide-in': isShowUpdateFolderModal, 'slide-out': !isShowUpdateFolderModal }]" @click=" isShowUpdateFolderModal=false">
		    <view class="update-folder-content" @click.stop>
				<view class="header">
					<image  class="iconfont  icon-cuowu2 "  @click="isShowUpdateFolderModal=false" ></image>
					 <text class="modal-title">编辑收藏夹</text>
					<view class="save-button" @click="saveFolder">保存</view>
				</view>
				
				<view class="folder-name-container">
				  <!-- 文件夹名称输入框 -->
				  <input v-model="newFolderName" class="folder-name-input" placeholder="请输入文件夹名称" maxlength="15" />
				  <!-- 文件夹名称字符数 -->
				  <view class="char-count">{{ newFolderName.length }}/15</view>
				</view>
				
				 <!-- 文件夹描述输入框 -->
				  <view class="folder-description-container">
				    <textarea v-model="folderDescription" class="folder-description-input" placeholder="请输入文件夹描述(选填)" maxlength="200"></textarea>
				    <view class="description-count">{{ folderDescription.length }}/200</view>
				  </view>
				  
				  <view class="public-visibility">
				    <!-- 公开/私密文本 -->
				    <view class="visibility-text">公开</view>
				  
				    <!-- 选择框 -->
				    <view class="select-icon" @click="toggleVisibility">
				      <image 
				        :src="isPublic ? '/static/img/round_check.png' : '/static/img/round.png'" 
				        class="icon" 
				      />
				    </view>
				  </view>
				  
				  <view class="no-public-visibility">
				    <!-- 公开/私密文本 -->
				    <view class="visibility-text">私密</view>
				  
				    <!-- 选择框 -->
				    <view class="select-icon" @click="toggleVisibility">
				      <image 
				        :src="!isPublic ? '/static/img/round_check.png' : '/static/img/round.png'" 
				        class="icon" 
				      />
				    </view>				  							
				  </view>
				  
				  <view class="default">
				    <!-- 公开/私密文本 -->
				    <view class="visibility-text">默认</view>
				  
				    <!-- 选择框 -->
				    <view class="select-icon" @click="toggleDefault">
				      <image 
				        :src="isDefault ? '/static/img/round_check.png' : '/static/img/round.png'" 
				        class="icon" 
				      />
				    </view>				  							
				  </view>
		    </view>
		</view>
		
		<!--选择收藏夹-->
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'收藏',
				viewHeight:0,
				loadCount:10,
				fetchDataOnce:true,
				folder:{ id: 1, name: '异常收藏夹名', isDefault: true, contentCount: 0, visibility: 1,description:"异常"},
				isShowUpdateFolderModal:false,
				newFolderName:'',
				 folderDescription:'',
				 isPublic: true,  // 默认选择“公开”
				isDefault:false,
				isShowDeleteBlogModal:false,
				selectedBlog:undefined,
				blogList:[{
					id:1,title:"安全进入博客详情安全进入博客详情安全进入博客详情安全进入博客详情安全进入博客详情",username:'yu小平'
				},
				{
					id:2,title:"安全进入博客详情2",username:'yu小平2'
				}
				],
			}
		},
		onLoad(options) {
		       // 获取传递的参数
		       const data = options.data;
			   
		       // 解码并解析 JSON 字符串
		       if (data) {
		           const decodedData = decodeURIComponent(data);
		           const item = JSON.parse(decodedData);
				   this.folder=item;
		           console.log(item); // 这里可以使用传递过来的 item 数据
		       }
			   this.calculateViewHeight();
		 },
		methods: {
		    selectBlog(item){
				console.log("选择的item",item);
				this.selectedBlog=item;
				this.isShowDeleteBlogModal=true;
			},
			goDisplyBlog(item){
				uni.navigateTo({
					 url: `/pages/blogArticleDisplay/blogArticleDisplay?id=${item.id}`
				})
			},
			cancelCollection(){
				
				uni.showToast({
					title:'取消收藏成功',
					icon:"success",
					duration:1000
				 })
				 this.isShowDeleteBlogModal=false;
			},
			moveFavorites(){
				uni.showToast({
					title:'功能暂未开放',
					icon:"error",
					duration:1000
				 })
				 return;
			},
			goBack() {
			  uni.navigateBack(); // 返回上一页
			},
			calculateViewHeight() {
			    this.$nextTick(() => {
			        const query = uni.createSelectorQuery().in(this);
			        // 获取 index-header-xhd 的高度
			        query.select('.content').boundingClientRect(headerData => {
			            this.viewHeight =headerData ? headerData.height : 0 ;
			            console.log('可用高度:', this.viewHeight);
			        }).exec();
			    });
			},
			editFavorites(){
				if(this.folder){
					this.isShowUpdateFolderModal=true;
				this.folderDescription=this.folder.description,
				  this.isPublic=this.folder.visibility===1,  // 默认选择“公开”
				this. isDefault=this.folder.isDefault,
				 this.newFolderName=this.folder.name;
				 }
			},
			saveFolder(){
				if(this.newFolderName.length===0){
					uni.showToast({
					title:'文件名不能为空',
					icon:"error",
					duration:1000
					 })
					 return;
				}
				this.isShoeUpdateFolderModal=false;
				console.log("更新文件夹");
			},
			async fetchCollectionData(count,type){
				return new Promise((resolve) => {
					console.log("type",type);
					if(this.fetchDataOnce){
						this.fetchDataOnce=false;//只会加载一次
					}
					resolve([]);
				    });	
			}
		}
	}
</script>

<style lang="scss">
.whole {
	height: 100%; /* 使整个容器充满屏幕高度 */
	display: flex;
	flex-direction: column; /* 垂直排列 */
	background-color: #f0f0f0; /* 背景颜色 */
.delete-blog-modal{
	padding: 30rpx;
	box-sizing: border-box;
  	position: fixed;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	width: 100%;
  	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
  	display: flex;
  	justify-content: center;
	align-items: center;
  //	align-items: flex-end; /* 从底部对齐 */
  	z-index: 10001; /* 确保模态框位于最上层 */
  	/* 初始状态为隐藏 */
  	transform: translateY(100%);
  	opacity: 0;
  	transition:  opacity 0.5s ease; /* 添加过渡效果 */
  	//background-color: red;
  	.delete-blog-modal-content{
  		  background-color: white;
  		//background-color:;
  		 padding: 20rpx;
  		 border-radius: 30rpx;
  		 width: 100%;
  		// height: 500rpx; /* 最大高度 */
  		 box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  		 display: flex;
  		 flex-direction: column; /* 纵向布局 */
  		 position: relative;
		 .modal-item {
		   display: flex;
		   align-items: center;
		   padding: 12px;
		   border-bottom: 1px solid #ddd;
		   .icon {
		     color: #000;
		     font-size: 30rpx;
		     width: 40rpx;
		     height: 40rpx;
		     text-align: center;
		     line-height: 40rpx;
		     margin-right: 12px;
		   }
		   
		   .text {
		     font-size: 16px;
		     color: #333;
		   }
		 }
		 
		 .modal-item:last-child {
		   border-bottom: none; /* 去掉最后一行的边框 */
		 }
		 
		
	}
}
 /* 滑入效果 */
  .delete-blog-modal.slide-in {
    transform: translateY(0); /* 滑入 */
    opacity: 1; /* 完全可见 */
  }
  
  /* 滑出效果 */
  .delete-blog-modal.slide-out {
    transform: translateY(100%); /* 滑出 */
    opacity: 0; /* 完全透明 */
  }

  .myHearder{
	padding-top: var(--status-bar-height); /* 状态栏高度 */
	font-size: 1.2rem;

	width: 100%;
	background-color: #f8f8f8; /* 背景颜色 */
	position: sticky; /* 固定在页面顶部 */
	top: 0;
	display: flex;
	flex-direction: column; /* 垂直排列 */
	
	
	.custom-navbar{
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		height: 80rpx; /* 导航栏高度 */
		/* 左侧部分 */
		.left {
		  position: absolute;
		  left: 0;
		  height: 80rpx;
		  width: 80rpx;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  
		  .iconfont {
		    color: #000;
		    font-size: 40rpx;
		    width: 50%;
		    height: 100rpx;
		    text-align: center;
		    line-height: 100rpx;
		  }
		}
		  
		/* 中间部分 */
		.center {
		  color: #000;
		  font-family: "楷体", "SimSun", "宋体", sans-serif; /* 设置字体 */
		}
	}
	.favorite-display{
		display: flex;
		flex-direction: column; /* 纵向布局 */
		position: relative;
		padding: 10px;
		//margin-bottom: 10rpx;
		//background-color: red;
		  flex: 1; /* 左侧区域占据剩余空间 */
		.folder-header {
		  display: flex;
		  justify-content: space-between; /* 左右分布：名称和默认标签 */
		  align-items: center;
		  .edit-button{
			margin-right: 10rpx;
			padding: 4px 18px;
			 border-radius: 10px;
			 border: 1rpx solid #ccc; /* 边框 */
			//background-color: #f0f0f0; /* 背景颜色 */
			 font-size: 16px; /* 字体大小 */
			    color: #333; /* 字体颜色 */
		  }
		  .folder-info {
		    display: flex;
		    align-items: center;
		    .folder-name {
		      font-weight: bold;
		      color: #333;
		      margin-right: 10px;
		    }
		    
		    .default-tag {
		      background-color: #4caf50;
		      color: white;
		      padding: 2px 8px;
		      border-radius: 4px;
		      font-size: 12px;
		    }
		    
		  }
		}
		.folder-details {
		//background-color: #0056b3;
		  display: flex;
		  //justify-content: space-between; /* 内容与可见性状态分开显示 */
		  align-items: center;
		  margin-top: 5px;
		  font-size: 14px;
		  color: #777;
		  .folder-content {
		    margin-right: 10px;
		  }
		  
		  .visibility-status {
		    font-style: italic;
		  }
		}
	}
	
  }
  .content{
	  flex: 1;
	 // background-color: red;
	 .card {
	   width: 100%; /* 卡片宽度 */
	   padding: 10rpx;
	   box-sizing: border-box;
	   border-bottom: 1rpx solid #ccc;
	   border-radius: 4rpx;
	  // background-color: #fff;
	 
	   box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
	   .title {
		//max-width:400rpx;
	     font-size: 30rpx; /* 标题字体大小 */
	     font-weight: bold;
		  overflow: hidden; /* 超出部分隐藏 */
		   white-space: nowrap; /* 不换行 */
		   text-overflow: ellipsis; /* 超出用省略号替代 */
	   }
	   .info {
		 margin-bottom: 10rpx; /* 上边距 */
		padding: 0 10rpx ;
	     display: flex; /* 使用 flexbox */
	     justify-content: space-between; /* 左右对齐 */
	     align-items: center; /* 垂直居中 */
	     margin-top: 10rpx; /* 上边距 */
		 
	     .author {
			 
	       font-size: 15rpx; /* 作者名字体大小 */
	       color: #666; /* 作者名颜色 */
	     }
	     
	     .icon {
	      color: #000;
	      font-size: 30rpx;
	      width: 40rpx;
	      height: 40rpx;
	      text-align: center;
	      line-height: 40rpx;
	      margin-right: 12px;
	     }
	   }
	 }
	
  }
  
  
  .update-folder-modal-background {
    position: fixed; /* 固定定位，覆盖整个页面 */
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* 黑色背景，透明度为0.3 */
    z-index: 998; /* 背景层次在内容下方 */
    opacity: 0;
    transform: translateY(100%);
    transition:  opacity 0.1s ease; /* 添加过渡效果 */
  }
  .update-folder-modal-background.fade-in {
    transform: translateY(0); /* 滑入 */
    opacity: 1; /* 完全可见 */
  }
   
  .update-folder-modal-background.fade-out {
  	transform: translateY(100%); /* 滑入 */
      opacity: 0; /* 完全透明 */
  }
  .update-folder-modal{
  	position: fixed;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	width: 100%;
  	height: 100%;
  	display: flex;
  	justify-content: center;
  	align-items: flex-end; /* 从底部对齐 */
  	z-index: 10001; /* 确保模态框位于最上层 */
  	/* 初始状态为隐藏 */
  	transform: translateY(100%);
  	opacity: 0;
  	transition: transform 0.3s ease, opacity 0.1s ease; /* 添加过渡效果 */
  	//background-color: rgba(0, 0, 0, 0.5);
  	.update-folder-content{
  		  background-color: white;
  		//background-color:;
  		 padding: 20rpx;
  		 border-radius: 30rpx;
  		 width: 100%;
  		// height: 70%; /* 最大高度 */
  		 box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  		 display: flex;
  		 flex-direction: column; /* 纵向布局 */
  		 position: relative;
  		 .header{
  			
  		 	padding: 10rpx;
  		 	height: 50rpx;
  		 	display: flex; /* 使用flex布局 */
  		 	align-items: center; /* 垂直居中对齐 */
  		 	 justify-content: space-between; /* 左右对齐 */
  		 	.iconfont{
  		 		margin-right: 10rpx;
  		 			//background-color: red;
  		 		  color: #ccc;
  		 		  font-size: 45rpx;
  		 		  width: 45rpx;
  		 		  height: 45rpx;
  		 		  text-align: center;
  		 		  line-height: 45rpx;
  		 	}
  		 	.modal-title {
  		 	    flex: 1; /* 占据剩余空间 */
  		 	    text-align: center; /* 中间对齐 */
  		 	    font-size: 18px; /* 字体大小 */
  		 	}
  		 	.save-button{
  		 		color: #000;
  		 		border: 1rpx solid #ccc;
  		 		width: 100rpx;
  		 		height: 50rpx;
  		 		line-height: 50rpx;
  		 		text-align: center;
  		 	    border-radius: 20rpx; /* 圆角效果 */
  		 	    cursor: pointer; /* 鼠标指针样式 */
  		 	}
  		 }
  		 .folder-name-container {
  		   // background-color: white;
  		   display: flex;
  		   align-items: center;
  		   justify-content: space-between; /* 让内容分布在两侧 */
  		   border-bottom: 1rpx solid #ccc;
  		   margin-top: 10px;
  		   padding: 0 10rpx;
  		   .char-count {
  		     font-size: 14px;
  		     color: #888;
  		   }
  		   .folder-name-input {
  		    // width: 80%; /* 输入框占据大部分宽度 */
  			 flex: 1;
  		     padding: 10px;
  		     font-size: 16px;
  		     //border-radius: 4px;
  		   }
  		 }
  		 .folder-description-container {
  			// background-color: white;
  		   margin-top: 10px;
  		   .folder-description-input {
  		     width: 100%;
  		     padding: 10px;
  		     font-size: 16px;
  		     height: 100px;
  		     border-bottom: 1rpx solid #ccc;
  		     //border-radius: 4px;
  			 box-sizing: border-box;
  		     resize: none;
  		   }
  		   
  		   .description-count {
  		     margin-top: 5px;
  		     text-align: right;
  		     font-size: 12px;
  		     color: #888;
  		   }
  		 }
  		.default, .no-public-visibility,.public-visibility {
  			// background-color: white;
  		   display: flex;
  		   justify-content: space-between; /* 让文本和选择框分别位于左右 */
  		   align-items: center; /* 垂直居中 */
  		   margin:10px 0px; /* 上边距，根据需求调整 */
  		   padding: 0 10px;
  		   .visibility-text {
  		     font-size: 20px;
  		     color: #333;
  		   }
  		   .select-icon {
  		     display: flex;
  		     align-items: center;
  			 justify-content: center;
  		     .icon {
  		       width: 20px;
  		       height: 20px;
  		     }
  		   }
  		 }
  		 // .no-public-visibility{
  			//  border-bottom: 1rpx solid #ccc; 
  		 // }
  
  	}
  }
   /* 滑入效果 */
    .update-folder-modal.slide-in {
      transform: translateY(0); /* 滑入 */
      opacity: 1; /* 完全可见 */
    }
    
    /* 滑出效果 */
    .update-folder-modal.slide-out {
      transform: translateY(100%); /* 滑出 */
      opacity: 0; /* 完全透明 */
    }
  }
</style>
